<!-- 使用说明：
<areaPicker ref="areaPicker" @getAreaPicker="getAreaPicker"></areaPicker>

import areaPicker from '@/components/pageComponents/sp-store/area-picker/index.vue';
components: {
	areaPicker
},

data(){
	return{
		areaTxt: '',
	}
}

methods:{
	openAreaPicker() {
		this.$refs.areaPicker.open();
	},
	getAreaPicker(val) {
		console.log('接收省市区', val);
		this.areaTxt = `${val.value[0]}/${val.value[1]}/${val.value[2]}`;
	},
}
 -->

<template>
  <u-picker
    :show="show"
    ref="uPicker"
    :loading="loading"
    :columns="columns"
    @change="changeHandler"
    @cancel="cancel"
    @confirm="confirm"
  ></u-picker>
</template>

<script>
import { getArea } from "@/service/api/sp-store/index.js";
export default {
  data() {
    return {
      show: false,
      loading: false,
      columns: [["北京"], ["市辖区"], ["东城区"]],
      provinceArr: [],
      cityArr: [],
      areaArr: [],
    };
  },
  mounted() {
    this.initFun();
  },
  methods: {
    open() {
      this.show = true;
    },
    cancel() {
      this.show = false;
    },
    confirm(e) {
      this.show = false;
      this.$emit("getAreaPicker", e);
    },
    async changeHandler(e) {
      let { columnIndex, index } = e;
      if (columnIndex === 0) {
        this.loading = true;
        Promise.all([this.getCityData(index)]).finally(() => {
          this.getAreaData();
        });
      } else if (columnIndex === 1) {
        this.loading = true;
        await this.getAreaData(index);
      }
    },

    initFun() {
      Promise.all([this.getProvinceData()]).finally(() => {
        this.getCityData();
        setTimeout(() => {
          this.getAreaData();
        }, 100);
      });
    },

    // 请求省数据
    getProvinceData() {
      return new Promise((resolve) => {
        let picker = this.$refs.uPicker;
        let data = { type: 1 };
        getArea(data).then((res) => {
          this.provinceArr = res;
          let provinceArr = [];
          res.forEach((el) => {
            provinceArr.push(el?.label);
          });
          picker.setColumnValues(0, provinceArr);
          this.loading = false;
          resolve();
        });
      });
    },
    // 请求市数据
    getCityData(index) {
      let provinceIndex = index ? index : 0;
      return new Promise((resolve) => {
        let picker = this.$refs.uPicker;
        this.provinceLabel = this.provinceArr[provinceIndex]?.label;
        let data = {
          provinceName: this.provinceLabel,
          type: 2,
        };
        getArea(data).then((res) => {
          this.cityArr = res;
          let cityArr = [];
          res.forEach((el) => {
            cityArr.push(el.label);
          });
          picker.setColumnValues(1, cityArr);
          this.loading = false;
          // console.log('请求市数据');
          resolve();
        });
      });
    },
    // 请求区数据
    getAreaData(index) {
      let cityIndex = index ? index : 0;
      return new Promise((resolve) => {
        let picker = this.$refs.uPicker;
        let data = {
          provinceName: this.provinceLabel,
          code: this.cityArr[cityIndex]?.label,
          type: 3,
        };
        getArea(data).then((res) => {
          let areaArr = [];
          res.forEach((el) => {
            areaArr.push(el.label);
          });
          picker.setColumnValues(2, areaArr);
          this.loading = false;
          // console.log('请求区数据');
          resolve();
        });
      });
    },
  },
};
</script>
